W systemie komputera są zainstalowane liczne czcionki. Możliwe jest, że strona wykorzystuje czcionkę, której nie ma w systemie konkretnego komputera. Przeglądarka podstawia wówczas standardową czcionkę dostępna w systemie, która może wyglądać zupełnie inaczej niż planowana. Tworząc stronę, warto zadbać o to, aby czcionka wyświetlana, była taka sama lub przynajmniej zbliżona do zaplanowanej. CSS grupuje czcionki w/g określonych cech, a więc podobnych od siebie, w grupy nazywane rodzinami(family). Tych rodzin jest pięć:
| nazwa rodziny | opis | przykładowy opis |
|---|---|---|
| serif | czcionki szeryfowe, posiadaja dekorację zakończenia liter | Georgia, Bodoni, New Times Roman |
| sans-serif | bezszyfrowe; proste zakończenia liter | Arial, Verdena, Futura |
| monospace | monotypiczne; stała szerokość znaku | Courier, Courier New |
| cursive | pochylone | Comic Sans MS, Florence |
| fantasy | dekoracyjne | Impact, OldTown |
Istnieje możliwość podania wielkości czcionki w jednostkachw jednostkach bezwzględnych: mm, cm, in, pt, px... Można także podać jako względnie większą - larger lub mniejszą - smaller.
Kilka przykładów na wartość bezwzględną:
to ew. pochylenie.Wprowadzamy przez:
.font-style:wartość. Możliwe wartości:
- normal
- italic - pochylona
- oblique - działanie jak italic.
Wariant czcionki pozwala na wybór pomiędzy normalnym wyglądem a Kapitalikami, czyli wyświetlanie wielkich liter w rozmiarze małych liter.
Przykłady:
tekst normalny
Tekst ze stylem
font-variant:small-caps.
Grubość czcionki realizowana w HTML znacznikiem <b>, w CSS posiada dekralację font-weight:wartość. Możliwe wartośći to liczby od 100 do 900 z interwałem = 100 dające coraz grubszy tekst. Innymi wartościami są normal i bold ewentualnie Lighter lub bolder
akapit z pogrubioną i "obchudzoną" czcionką
Odstępy między wierszami ustalamy deklaracją line-height:wartość. Wartościami mogą być jednostki procentowe lub bezwzględne (mm, cm, px....). Ten akapit posiada odległości między liniami o wilekości 30px.
Można połączyć wiele atrybutów w jednym wpisie. Wówczas po elemencie font stawiamy dwukropek(:) i wpisujemy wartości oddzielone spacami w kolejności:
- font-style
- font-variant
- font weight
- font-size
- line-height
- font-family
Zmiana kolejności może skutkować nieprawidłowym odczytem wartości lub pominięciem cechy. Wyjątkiem jest odległość między liniami; wymaga poprzedzenia znakiem(/).
Formatowanie stylem font:italic small-caps bold 40px courier.
selektor { color: kolor }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "kolor" należy podać definicję koloru.
Przykład
selektor { text-decoration: dekoracja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "dekoracja" należy podać:
none - bez zmian
underline - podkreślenie
line-through - przekreślenie
overline - nadkreślenie
blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)
Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie). Migotanie może nie być interpretowane przez wszystkie przeglądarki!
selektor { text-transform: transformacja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "transformacja" należy podać:
none - bez zmian
capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
uppercase - zamiana wszystkich liter na wielkie
lowercase - zamiana wszystkich liter na małe
Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.
selektor { text-align: wyrównanie }
Selektorem może być dowolny znacznik wyświetlany w bloku, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "wyrównanie" należy podać:
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów jednocześnie (justowanie)
Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
selektor { text-indent: wcięcie }
Selektorem może być każdy znacznik wyświetlany w bloku.
Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości.
Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
selektor { text-shadow: poziom pion rozmycie kolor,... }
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
rozmycie - promień efektu rozmycia (opcjonalnie)
kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.
selektor { line-height: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
selektor { word-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
selektor { letter-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli.
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.